<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html><head><title>jqPlot Options</title><link rel="stylesheet" type="text/css" href="../styles/main.css"><script language=JavaScript src="../javascript/main.js"></script><script language=JavaScript src="../javascript/searchdata.js"></script></head><body class="ContentPage" onLoad="NDOnLoad()"><script language=JavaScript><!--
if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>

<!--  Generated by Natural Docs, version 1.4 -->
<!--  http://www.naturaldocs.org  -->

<!-- saved from url=(0026)http://www.naturaldocs.org -->




<div id=Content><div class="CSection"><div class=CTopic id=MainTopic><div class="CTitle logo"><div class="nav"><a class="nav" href="../../index.php"><span>&gt;</span>Home</a><a class="nav"  href="../../tests/"><span>&gt;</span>Examples</a><a class="nav"  href="../../docs/"><span>&gt;</span>Docs</a><a class="nav"  href="http://bitbucket.org/cleonello/jqplot/downloads/"><span>&gt;</span>Download</a><a class="nav" href="../../info.php"><span>&gt;</span>Info</a><a class="nav"  href="../../donate.php"><span>&gt;</span>Donate</a></div><a name="jqPlot_Options"></a>jqPlot Options</div><div class=CBody><p><b>This document is out of date.&nbsp;  While the options described here should still be relavent and valid, it has not been updated for many new options.&nbsp;  Sorry for this inconvenience.</b></p><p>This document describes the options available to jqPlot.&nbsp;  These are set with the third argument to the $.jqplot(&lsquo;target&rsquo;, data, options) function.&nbsp; Options are using the following convention:</p><blockquote><pre>property: default, // notes</pre></blockquote><p>This document is not complete!&nbsp;  Not all options are shown!&nbsp;  Also, Options marked with * in the notes are post 0.7.1 additions.&nbsp; They will be available in the next release.&nbsp;  Further information about the options can be found in the online API documentation.&nbsp;  For details on how the options relate to the API documentation, see the <a href="optionsTutorial-txt.html#Options_Tutorial" class=LSection id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">Options Tutorial</a> in the optionsTutorial.txt file.</p><blockquote><pre>options =
{
    seriesColors: [ &quot;#4bb2c5&quot;, &quot;#c5b47f&quot;, &quot;#EAA228&quot;, &quot;#579575&quot;, &quot;#839557&quot;, &quot;#958c12&quot;,
        &quot;#953579&quot;, &quot;#4b5de4&quot;, &quot;#d8b83f&quot;, &quot;#ff5800&quot;, &quot;#0085cc&quot;],  // colors that will
         // be assigned to the series.  If there are more series than colors, colors
         // will wrap around and start at the beginning again.

    stackSeries: false, // if true, will create a stack plot.
                        // Currently supported by line and bar graphs.

    title: '',      // Title for the plot.  Can also be specified as an object like:

    title: {
        text: '',   // title for the plot,
        show: true,
    },

    axesDefaults: {
        show: false,    // wether or not to renderer the axis.  Determined automatically.
        min: null,      // minimum numerical value of the axis.  Determined automatically.
        max: null,      // maximum numverical value of the axis.  Determined automatically.
        pad: 1.2,       // a factor multiplied by the data range on the axis to give the
                        // axis range so that data points don't fall on the edges of the axis.
        ticks: [],      // a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]
                        // array of ticks to use.  Computed automatically.
        numberTicks: undefined,
        renderer: $.jqplot.LinearAxisRenderer,  // renderer to use to draw the axis,
        rendererOptions: {},    // options to pass to the renderer.  LinearAxisRenderer
                                // has no options,
        tickOptions: {
            mark: 'outside',    // Where to put the tick mark on the axis
                                // 'outside', 'inside' or 'cross',
            showMark: true,
            showGridline: true, // wether to draw a gridline (across the whole grid) at this tick,
            markSize: 4,        // length the tick will extend beyond the grid in pixels.  For
                                // 'cross', length will be added above and below the grid boundary,
            show: true,         // wether to show the tick (mark and label),
            showLabel: true,    // wether to show the text label at the tick,
            formatString: '',   // format string to use with the axis tick formatter
        }
        showTicks: true,        // wether or not to show the tick labels,
        showTickMarks: true,    // wether or not to show the tick marks
    },

    axes: {
        xaxis: {
            // same options as axesDefaults
        },
        yaxis: {
            // same options as axesDefaults
        },
        x2axis: {
            // same options as axesDefaults
        },
        y2axis: {
            // same options as axesDefaults
        }
    },

    seriesDefaults: {
        show: true,     // wether to render the series.
        xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
        yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.
        label: '',      // label to use in the legend for this line.
        color: '',      // CSS color spec to use for the line.  Determined automatically.
        lineWidth: 2.5, // Width of the line in pixels.
        shadow: true,   // show shadow or not.
        shadowAngle: 45,    // angle (degrees) of the shadow, clockwise from x axis.
        shadowOffset: 1.25, // offset from the line of the shadow.
        shadowDepth: 3,     // Number of strokes to make when drawing shadow.  Each
                            // stroke offset by shadowOffset from the last.
        shadowAlpha: 0.1,   // Opacity of the shadow.
        showLine: true,     // whether to render the line segments or not.
        showMarker: true,   // render the data point markers or not.
        fill: false,        // fill under the line,
        fillAndStroke: false,       // *stroke a line at top of fill area.
        fillColor: undefined,       // *custom fill color for filled lines (default is line color).
        fillAlpha: undefined,       // *custom alpha to apply to fillColor.
        renderer: $.jqplot.LineRenderer],    // renderer used to draw the series.
        rendererOptions: {}, // options passed to the renderer.  LineRenderer has no options.
        markerRenderer: $.jqplot.MarkerRenderer,    // renderer to use to draw the data
                                                    // point markers.
        markerOptions: {
            show: true,             // wether to show data point markers.
            style: 'filledCircle',  // circle, diamond, square, filledCircle.
                                    // filledDiamond or filledSquare.
            lineWidth: 2,       // width of the stroke drawing the marker.
            size: 9,            // size (diameter, edge length, etc.) of the marker.
            color: '#666666'    // color of marker, set to color of line by default.
            shadow: true,       // wether to draw shadow on marker or not.
            shadowAngle: 45,    // angle of the shadow.  Clockwise from x axis.
            shadowOffset: 1,    // offset from the line of the shadow,
            shadowDepth: 3,     // Number of strokes to make when drawing shadow.  Each stroke
                                // offset by shadowOffset from the last.
            shadowAlpha: 0.07   // Opacity of the shadow
        }
    },

    series:[
        {Each series has same options as seriesDefaults},
        {You can override each series individually here}
    ],

    legend: {
        show: false,
        location: 'ne',     // compass direction, nw, n, ne, e, se, s, sw, w.
        xoffset: 12,        // pixel offset of the legend box from the x (or x2) axis.
        yoffset: 12,        // pixel offset of the legend box from the y (or y2) axis.
    },

    grid: {
        drawGridLines: true,        // wether to draw lines across the grid or not.
        gridLineColor: '#cccccc'    // *Color of the grid lines.
        background: '#fffdf6',      // CSS color spec for background color of grid.
        borderColor: '#999999',     // CSS color spec for border around grid.
        borderWidth: 2.0,           // pixel width of border around grid.
        shadow: true,               // draw a shadow for grid.
        shadowAngle: 45,            // angle of the shadow.  Clockwise from x axis.
        shadowOffset: 1.5,          // offset from the line of the shadow.
        shadowWidth: 3,             // width of the stroke for the shadow.
        shadowDepth: 3,             // Number of strokes to make when drawing shadow.
                                    // Each stroke offset by shadowOffset from the last.
        shadowAlpha: 0.07           // Opacity of the shadow
        renderer: $.jqplot.CanvasGridRenderer,  // renderer to use to draw the grid.
        rendererOptions: {}         // options to pass to the renderer.  Note, the default
                                    // CanvasGridRenderer takes no additional options.
    },

    // Plugin and renderer options.

    // BarRenderer.
    // With BarRenderer, you can specify additional options in the rendererOptions object
    // on the series or on the seriesDefaults object.  Note, some options are respecified
    // (like shadowDepth) to override lineRenderer defaults from which BarRenderer inherits.

    seriesDefaults: {
        rendererOptions: {
            barPadding: 8,      // number of pixels between adjacent bars in the same
                                // group (same category or bin).
            barMargin: 10,      // number of pixels between adjacent groups of bars.
            barDirection: 'vertical', // vertical or horizontal.
            barWidth: null,     // width of the bars.  null to calculate automatically.
            shadowOffset: 2,    // offset from the bar edge to stroke the shadow.
            shadowDepth: 5,     // nuber of strokes to make for the shadow.
            shadowAlpha: 0.8,   // transparency of the shadow.
        }
    },

    // Cursor
    // Options are passed to the cursor plugin through the &quot;cursor&quot; object at the top
    // level of the options object.

    cursor: {
        style: 'crosshair',     // A CSS spec for the cursor type to change the
                                // cursor to when over plot.
        show: true,
        showTooltip: true,      // show a tooltip showing cursor position.
        followMouse: false,     // wether tooltip should follow the mouse or be stationary.
        tooltipLocation: 'se',  // location of the tooltip either relative to the mouse
                                // (followMouse=true) or relative to the plot.  One of
                                // the compass directions, n, ne, e, se, etc.
        tooltipOffset: 6,       // pixel offset of the tooltip from the mouse or the axes.
        showTooltipGridPosition: false,     // show the grid pixel coordinates of the mouse
                                            // in the tooltip.
        showTooltipUnitPosition: true,      // show the coordinates in data units of the mouse
                                            // in the tooltip.
        tooltipFormatString: '%.4P',    // sprintf style format string for tooltip values.
        useAxesFormatters: true,        // wether to use the same formatter and formatStrings
                                        // as used by the axes, or to use the formatString
                                        // specified on the cursor with sprintf.
        tooltipAxesGroups: [],  // show only specified axes groups in tooltip.  Would specify like:
                                // [['xaxis', 'yaxis'], ['xaxis', 'y2axis']].  By default, all axes
                                // combinations with for the series in the plot are shown.

    },

    // Dragable
    // Dragable options are specified with the &quot;dragable&quot; object at the top level
    // of the options object.

    dragable: {
        color: undefined,       // custom color to use for the dragged point and dragged line
                                // section. default will use a transparent variant of the line color.
        constrainTo: 'none',    // Constrain dragging motion to an axis: 'x', 'y', or 'none'.
    },

    // Highlighter
    // Highlighter options are specified with the &quot;highlighter&quot; object at the top level
    // of the options object.

    highlighter: {
        lineWidthAdjust: 2.5,   // pixels to add to the size line stroking the data point marker
                                // when showing highlight.  Only affects non filled data point markers.
        sizeAdjust: 5,          // pixels to add to the size of filled markers when drawing highlight.
        showTooltip: true,      // show a tooltip with data point values.
        tooltipLocation: 'nw',  // location of tooltip: n, ne, e, se, s, sw, w, nw.
        fadeTooltip: true,      // use fade effect to show/hide tooltip.
        tooltipFadeSpeed: &quot;fast&quot;// slow, def, fast, or a number of milliseconds.
        tooltipOffset: 2,       // pixel offset of tooltip from the highlight.
        tooltipAxes: 'both',    // which axis values to display in the tooltip, x, y or both.
        tooltipSeparator: ', '  // separator between values in the tooltip.
        useAxesFormatters: true // use the same format string and formatters as used in the axes to
                                // display values in the tooltip.
        tooltipFormatString: '%.5P' // sprintf format string for the tooltip.  only used if
                                    // useAxesFormatters is false.  Will use sprintf formatter with
                                    // this string, not the axes formatters.
    },

    // LogAxisRenderer
    // LogAxisRenderer add 2 options to the axes object.  These options are specified directly on
    // the axes or axesDefaults object.

    axesDefaults: {
        base: 10,                   // the logarithmic base.
        tickDistribution: 'even',   // 'even' or 'power'.  'even' will produce with even visiual (pixel)
                                    // spacing on the axis.  'power' will produce ticks spaced by
                                    // increasing powers of the log base.
    },

    // PieRenderer
    // PieRenderer accepts options from the rendererOptions object of the series or seriesDefaults object.

    seriesDefaults: {
        rendererOptions: {
            diameter: undefined, // diameter of pie, auto computed by default.
            padding: 20,        // padding between pie and neighboring legend or plot margin.
            sliceMargin: 0,     // gap between slices.
            fill: true,         // render solid (filled) slices.
            shadowOffset: 2,    // offset of the shadow from the chart.
            shadowDepth: 5,     // Number of strokes to make when drawing shadow.  Each stroke
                                // offset by shadowOffset from the last.
            shadowAlpha: 0.07   // Opacity of the shadow
        }
    },

    // Trendline
    // Trendline takes options on the trendline object of the series or seriesDefaults object.

    seriesDefaults: {
        trendline: {
            show: true,         // show the trend line
            color: '#666666',   // CSS color spec for the trend line.
            label: '',          // label for the trend line.
            type: 'linear',     // 'linear', 'exponential' or 'exp'
            shadow: true,       // show the trend line shadow.
            lineWidth: 1.5,     // width of the trend line.
            shadowAngle: 45,    // angle of the shadow.  Clockwise from x axis.
            shadowOffset: 1.5,  // offset from the line of the shadow.
            shadowDepth: 3,     // Number of strokes to make when drawing shadow.
                                // Each stroke offset by shadowOffset from the last.
            shadowAlpha: 0.07   // Opacity of the shadow
        }
    }
}</pre></blockquote></div></div></div>

</div><!--Content-->


<div id=Footer>Copyright &copy; 2009 - 2010 Chris Leonello&nbsp; &middot;&nbsp; Updated October 7th, 2012&nbsp; &middot;&nbsp; <a href="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->


<div id=Menu><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent1')">Usage and Options</a><div class=MGroupContent id=MGroupContent1><div class=MEntry><div class=MFile><a href="usage-txt.html">Usage</a></div></div><div class=MEntry><div class=MFile id=MSelected>jqPlot Options</div></div><div class=MEntry><div class=MFile><a href="optionsTutorial-txt.html">Options Tutorial</a></div></div><div class=MEntry><div class=MFile><a href="jqPlotCssStyling-txt.html">jqPlot CSS Customization</a></div></div><div class=MEntry><div class=MFile><a href="changes-txt.html">Change Log</a></div></div><div class=MEntry><div class=MLink><a href="../../tests/">Examples</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent4')">API Documentation</a><div class=MGroupContent id=MGroupContent4><div class=MEntry><div class=MFile><a href="jqplot-core-js.html">jqPlot Charts</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent2')">Core Renderers</a><div class=MGroupContent id=MGroupContent2><div class=MEntry><div class=MFile><a href="jqplot-axisTickRenderer-js.html">Axis Tick Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-canvasGridRenderer-js.html">Canvas Grid Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-divTitleRenderer-js.html">Div Title Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-linearAxisRenderer-js.html">Linear Axis Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-markerRenderer-js.html">Marker Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-shapeRenderer-js.html">Shape Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-shadowRenderer-js.html">Shadow Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-lineRenderer-js.html">Line Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-axisLabelRenderer-js.html">Axis Label Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-themeEngine-js.html">Theme Engine</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-toImage-js.html">fn</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent3')">Plugins</a><div class=MGroupContent id=MGroupContent3><div class=MEntry><div class=MFile><a href="plugins/jqplot-barRenderer-js.html">jqplot.<wbr>BarRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-BezierCurveRenderer-js.html">jqplot.<wbr>BezierCurveRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-blockRenderer-js.html">jqplot.<wbr>BlockRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-bubbleRenderer-js.html">jqplot.<wbr>BubbleRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-canvasAxisLabelRenderer-js.html">jqplot.<wbr>CanvasAxisLabelRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-canvasAxisTickRenderer-js.html">jqplot.<wbr>CanvasAxisTickRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pyramidGridRenderer-js.html">jqplot.<wbr>CanvasGridRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-canvasOverlay-js.html">jqplot.<wbr>CanvasOverlay</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-categoryAxisRenderer-js.html">jqplot.<wbr>CategoryAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-ciParser-js.html">jqplot.<wbr>ciParser</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-cursor-js.html">jqplot.<wbr>Cursor</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-dateAxisRenderer-js.html">jqplot.<wbr>DateAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-donutRenderer-js.html">jqplot.<wbr>DonutRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-dragable-js.html">jqplot.<wbr>Dragable</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-enhancedLegendRenderer-js.html">jqplot.<wbr>enhancedLegendRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-funnelRenderer-js.html">jqplot.<wbr>FunnelRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-highlighter-js.html">jqplot.<wbr>Highlighter</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-logAxisRenderer-js.html">jqplot.<wbr>LogAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-mekkoAxisRenderer-js.html">jqplot.<wbr>MekkoAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-mekkoRenderer-js.html">jqplot.<wbr>MekkoRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-meterGaugeRenderer-js.html">jqplot.<wbr>MeterGaugeRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-ohlcRenderer-js.html">jqplot.<wbr>OHLCRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pieRenderer-js.html">jqplot.<wbr>PieRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pointLabels-js.html">jqplot.<wbr>PointLabels</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pyramidAxisRenderer-js.html">jqplot.<wbr>pyramidAxisRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pyramidRenderer-js.html">jqplot.<wbr>pyramidRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-trendline-js.html">jqplot.<wbr>Trendline</a></div></div></div></div></div></div></div></div><div class=MEntry><div class=MFile><a href="gpl-2-0-txt.html">GPL License</a></div></div><div class=MEntry><div class=MFile><a href="MIT-LICENSE-txt.html">MIT License</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent5')">Index</a><div class=MGroupContent id=MGroupContent5><div class=MEntry><div class=MIndex><a href="../index/General.html">Everything</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Classes.html">Classes</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Properties.html">Properties</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Functions.html">Functions</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Hooks.html">Hooks</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Files.html">Files</a></div></div></div></div></div><script type="text/javascript"><!--
var searchPanel = new SearchPanel("searchPanel", "HTML", "../search");
--></script><div id=MSearchPanel class=MSearchPanelInactive><input type=text id=MSearchField value=Search onFocus="searchPanel.OnSearchFieldFocus(true)" onBlur="searchPanel.OnSearchFieldFocus(false)" onKeyUp="searchPanel.OnSearchFieldChange()"><select id=MSearchType onFocus="searchPanel.OnSearchTypeFocus(true)" onBlur="searchPanel.OnSearchTypeFocus(false)" onChange="searchPanel.OnSearchTypeChange()"><option  id=MSearchEverything selected value="General">Everything</option><option value="Classes">Classes</option><option value="Files">Files</option><option value="Functions">Functions</option><option value="Hooks">Hooks</option><option value="Properties">Properties</option></select></div><script language=JavaScript><!--
HideAllBut([1, 4, 5], 6);// --></script></div><!--Menu-->



<!--START_ND_TOOLTIPS-->
<div class=CToolTip id="tt1"><div class=CSection>This document will help you understand how jqPlot&rsquo;s options relate to the API documentation and the jqPlot object itself. </div></div><!--END_ND_TOOLTIPS-->




<div id=MSearchResultsWindow><iframe src="" frameborder=0 name=MSearchResults id=MSearchResults></iframe><a href="javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose>Close</a></div>


<script language=JavaScript><!--
if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>